<template>
	<view class="wodeshoucang">
		<view class="item" v-for="(item,index) in  list" :key="index">
			<view class="shangpin"  @click="handlexiangqing(item.goodsId)">
				<view class="shangpin-image">
					<image class="shangpin-image-image" :src="item.goodsImg" mode="aspectFill"></image>
					<image v-if="item.inventory==0" class="shangpin-image-image1" src="../../static/tx_sq@2x.png" mode="" ></image>
				</view>
				<view class="shangpin-box">
					<view class="name">
						{{item.goodsName}}
					</view>
					<view class="spec">
						销量：{{item.sales}}
					</view>
					<view class="price">
						<text class="price-text">￥{{item.goodsPrice}}</text>
					</view>
				</view>
			</view>
			<view class="btn">
				<view class="btn-item" @click="handleshow(item.goodsId,index)">
					取消收藏
				</view>
				<view class="btn-item" @click="handlexiangqing(item.goodsId)">
					查看详情
				</view>
			</view>
		</view>
		<view class="loadmore" v-if="isLoadmore">
			<u-loadmore :status="status" :icon-type="flower"/>
		</view>
		<view class="empty" v-if="showEmpty">
			<text>暂无收藏</text>
		</view>
	</view>
</template> 

<script>
	export default {
		data() {
			return {
				page:1,
				size:10,
				pageTotal:'',
				list:[],
				showEmpty:false,
				status: 'loading',
				isLoadmore:true,
				share:uni.getStorageSync('share')
			}
		},
		onLoad() {
			this.getcollection()
		},
		methods: {
			//商品详情
			handlexiangqing(goodsId){
				const params = 'goodsId=' + goodsId
				uni.navigateTo({
					url:'/pages/shangpinxiangqing/shangpinxiangqing?' + params 
				})
			},
			//收藏列表
			async getcollection(){
				const params = {
					page:this.page,
					size:this.size
				}
				const res = await this.$u.api.collection(params)
				if (res.total < 10) {
					this.isLoadmore = false
				}
				this.status = 'nomore'
				this.list = [...this.list,...res.rows]
				this.pageTotal = Math.ceil(res.total/this.size)
				if (res.total > 0) {
					this.showEmpty = false
				}else{
					this.showEmpty = true
				}
				uni.stopPullDownRefresh()
			},
			//、取消收藏
			async handleshow(goodsId,index){
				const params = {
					goodsId:goodsId
				}
				const res = await this.$u.api.addordelete(params)
				this.$u.toast(res.msg)
				if (res.code == 0) {
					this.list.splice(index,1)
					if (this.list.length == 0) {
						this.showEmpty = true
					}
				}
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1
			this.list = []
			this.getcollection()
		},
		//向上加载
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.pageTotal) {
				this.isLoadmore = true
				this.status = 'loading';
				setTimeout(()=>{
					this.getcollection()
				},600)
			} else{
				//this.$u.toast('没有更多数据了')
			}
		},
	}
</script>
<style>
	page{
		background: #FBFBFB;
	}
</style>
<style scoped lang="scss">
    .wodeshoucang{
		padding: 28rpx 0rpx;
	}
	.item{
		padding: 28rpx;
		margin-bottom: 28rpx;
		background: white;
	}
	.shangpin{
		display: flex;
		flex-direction: row;
		padding: 0rpx 0rpx 24rpx 0rpx;
	    border-bottom: 0.5px solid #EFEFEF;
	}
	.shangpin-image{
		width: 204rpx;
		height: 204rpx;
		position: relative;
	}
	.shangpin-image-image{
		width: 204rpx;
		height: 204rpx;
	}
	.shangpin-image-image1{
		width: 130rpx;
		height: 130rpx;
		position: absolute;
		top: 34rpx;
		left: 34rpx;
	}
	.shangpin-box{
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}
	.name{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.spec{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.price{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.price-text{
		font-size: 32rpx;
		font-family: DIN-Medium, DIN;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}
	.btn{
		padding-top: 28rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.btn-item{
		margin-left: 16rpx;
		width: 180rpx;
		height: 68rpx;
		border: 1px solid #5D22BA;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #5D22BA;
		line-height: 68rpx;
		text-align: center;
	}
	
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
	.loadmore{
		padding-bottom: 20rpx;
	}
</style>
